<template>
  <div class="box1">
    <div class="zhanghu">
      <div class="zhanghu-l" @click="queryCount">
        <span>账户总金额</span>
        <span class="tubiaoq" :style="bgc"></span>
        <div style="line-height: 30px">{{ overage }}</div>
      </div>
      <div class="zahnghu-r" style="float: right"></div>
      <div class="cccc">
        <span
          style="position: relative; top: 7px"
          @click="centerDialogVisible = true"
          >点击充值账户</span
        >
      </div>
    </div>
    <el-empty  v-if="open" description="暂无藏品，快去购买吧！"></el-empty>
    <el-card
      class="box-card"
      v-for="(item, index) in CollectionInfo"
      :key="index"
    >
      <div slot="header" class="clearfix">
        <img
          :src="item.imgsrc"
          class="cangping"
          style="width: 230px; height: 230px"
        />
        <p class="ff">{{ item.name }}</p>
        <div class="tubiao"></div>
      </div>
      <h1 class="ee">这是哪头猪-艺术工作室</h1>
      <h1 class="dd">编号:{{ item.number }}</h1>
      <span class="oo"></span>
      <div>
        <h1 class="rr">获得时间</h1>
        <span class="time">{{ item.createtime }}</span>
      </div>
    </el-card>
    <el-dialog
      title="联系微信购买金额"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <img
        src="\User-Img\wx.jpg"
        style="width: 300px; position: relative; left: 25%"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CoolectionAntiqueApi from "@/api/collection/CoolectionAntiqueApi";
import AccountApi from "@/api/account/AccountApi";
export default {
  name: "WarehouseManagement",
  data() {
    return {
      open: false,
      overage: "****",
      bgc: "",
      centerDialogVisible: false,
      CollectionInfo: [
        // {
        //   imgsrc: "/User-Img/906bf0e0-1c97-4066-ae2c-9f80c85af176.jpg",
        //   name: "猪猪",
        //   sell: 99,
        //   id: 1,
        //   number: 250,
        //   createtime: "2022-12-12-14:27",
        // },
        //  {
        //   imgsrc: "/User-Img/906bf0e0-1c97-4066-ae2c-9f80c85af176.jpg",
        //   name: "猪猪",
        //   sell: 99,
        //   id: 1,
        //   number: 250,
        //   createtime: "2022-12-12-14:27",
        // },
      ],
    };
  },
  created() {
    this.queryUserCoolecById(sessionStorage.getItem("userId"));
  },
  methods: {
    queryUserCoolecById(id) {
      CoolectionAntiqueApi.queryUserCoolecById(id).then((res) => {
        this.CollectionInfo = res.data.data;
        if (res.data.code != 1) {
          this.$message.warning("暂无藏品快去购买把");
          this.open = true;
        }
      });
    },
    queryCount() {
      if (this.bgc == "") {
        // 查询账户
        this.bgc =
          "background-image: url(//static.theone.art/pc/icons/icon-eye-open.png);";
        AccountApi.queryOverageById(sessionStorage.getItem("userId")).then(
          (res) => {
            // console.log(res.data.data[0].overage);
            this.overage = res.data.data[0].overage
          }
        );
      } else {
        // 关闭查询
        this.bgc = "";
        this.overage = "*****";
      }
    },
    openwx() {
      this.dialogVisible = !this.dialogVisible;
    },
  },
};
</script>

<style scoped>
.box1 {
  width: 1124px;
  /* height: 100%; */
  /* background-color: rgb(125, 77, 77); */
  margin: 5% auto;
}
.box-card {
  width: 262px;
  height: 332px;
  float: left;
  margin-right: 17px;
  margin-bottom: 17px;
}
.cangping {
  position: relative;
  left: -3px;
  top: 3px;
}
.ff {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 18px;
  float: left;
  margin-left: 40%;
}
.tubiao {
  background-image: url(//static.theone.art/pc/market-2/yan.png);
  width: 25px;
  height: 19px;
  position: relative;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  float: right;
}
.ee,
.rr {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
  margin-right: 7px;
  top: -13px;
  position: relative;
}
.rr {
  top: -4px;
  left: -34px;
}
.oo {
  background: url(//static.theone.art/pc/images/pic-home/lock%402x.png)
    no-repeat 100%;
  background-size: contain;
  display: inline-block;
  width: 18px;
  height: 18px;
  float: right;
  position: relative;
  top: -33px;
  right: 2px;
}
.dd {
  height: 16px;
  float: left;
  position: relative;
  top: -53px;
  background: linear-gradient(154deg, #282828, #484848);
  color: #e7aa71;
  border-radius: 10%;
  font-size: 12px;
}
.time {
  color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  text-align: right;
  position: relative;
  top: -23px;
  float: right;
  right: -19px;
}
.zhanghu {
  height: 81px;
  width: 1106px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(149deg, #ff7a64, #e61f1a);
  box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 10%);
  border-radius: 4px;
  padding: 16px 20px;
  color: #fff;
  overflow: hidden;
  margin-bottom: 5px;
  top: -43px;
  position: relative;
}
.tubiaoq {
  /* background-image: url(//static.theone.art/pc/icons/icon-eye-open.png); */
  background-image: url(//static.theone.art/pc/mine/icon-eye-open.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 23px;
  height: 24px;
  position: relative;
  left: 8px;
  top: 7px;
}
.cccc {
  height: 31px;
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 16px;
  border: 1px solid #fff;
  text-align: center;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  justify-content: center;
  position: relative;
  top: 7px;
}
</style>